import "./cnode.scss";
import { fetchTopics, ask } from "@/request/api/getDate";

export default class extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
    };
  }

  componentDidMount() {
    fetchTopics().then((res) => {
      // console.log(res.data);
      this.setState({
        data: res.data,
      });
    });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        <div className="header">
          <a href="">
            <img src="//static2.cnodejs.org/public/images/cnodejs_light.svg"></img>
          </a>
          <input type="text" />
        </div>

        <div className="main">
          <div className="left">
            <div className="top">
              {/* 点击按钮 */}
              <button>全部</button>
              <button>精华</button>
              <button>分享</button>
              <button>问答</button>
              <button>招聘</button>
              <button>客户端测试</button>
            </div>

            <div className="bottom">
              {/* 渲染列表数据list */}

              {data.map((ele) => (
                <div key={ele.id}>
                  <img
                    src={ele.author.avatar_url}
                    title={ele.author.loginname}
                  />
                  <span>
                    {ele.reply_count}/{ele.visit_count}
                  </span>
                  <span>{ele.top}</span>
                  <span>
                    <a href="#">{ele.title}</a>
                  </span>
                </div>
              ))}
            </div>
          </div>
          <div className="right"></div>
        </div>

        <div className="footer"></div>
      </div>
    );
  }
}
